<template>
  <view class="department-container">
    <!-- 科室分类 -->
    <view class="category-list">
      <scroll-view scroll-x class="scroll-view" show-scrollbar="false">
        <view 
          class="category-item"
          v-for="(category, index) in categories"
          :key="index"
          :class="{ active: currentCategory === category.value }"
          @tap="selectCategory(category.value)"
        >
          <image :src="category.icon" mode="aspectFit" class="category-icon" />
          <text>{{ category.name }}</text>
        </view>
      </scroll-view>
    </view>
    
    <!-- 科室列表 -->
    <view class="department-list">
      <view 
        class="department-item card"
        v-for="(dept, index) in filteredDepartments"
        :key="index"
        @tap="selectDepartment(dept)"
      >
        <view class="header">
          <view class="title-wrap">
            <image :src="dept.icon" mode="aspectFit" class="icon" />
            <text class="title">{{ dept.name }}</text>
          </view>
          <text class="status" :class="dept.status">{{ dept.statusText }}</text>
        </view>
        <text class="desc">{{ dept.description }}</text>
        <view class="doctors">
          <view class="doctor" v-for="(doctor, idx) in dept.doctors" :key="idx">
            <image :src="doctor.avatar" mode="aspectFill" />
            <view class="info">
              <text class="name">{{ doctor.name }}</text>
              <text class="title">{{ doctor.title }}</text>
            </view>
          </view>
        </view>
        <view class="footer">
          <view class="price-info">
            <text class="label">挂号费：</text>
            <text class="price">¥{{ dept.fee }}</text>
          </view>
          <button class="book-btn primary-btn" @tap.stop="selectDepartment(dept)">
            预约挂号
          </button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'

// 获取医院ID
const hospitalId = ref('')
onMounted(() => {
  const pages = getCurrentPages()
  const page = pages[pages.length - 1]
  hospitalId.value = page.$page?.options?.hospitalId
})

// 科室分类
const categories = [
  { value: 'all', name: '全部科室', icon: '/static/department/all.png' },
  { value: 'internal', name: '内科', icon: '/static/department/internal.png' },
  { value: 'surgery', name: '外科', icon: '/static/department/surgery.png' },
  { value: 'pediatrics', name: '儿科', icon: '/static/department/pediatrics.png' }
]

const currentCategory = ref('all')

// 科室列表
const departments = ref([
  {
    id: 1,
    name: '心内科',
    icon: '/static/department/cardiology.png',
    status: 'available',
    statusText: '可预约',
    description: '主要诊治心血管疾病，包括冠心病、高血压等',
    fee: 60,
    category: 'internal',
    doctors: [
      {
        name: '张医生',
        title: '主任医师',
        avatar: '/static/doctor/doctor1.jpg'
      },
      {
        name: '李医生',
        title: '副主任医师',
        avatar: '/static/doctor/doctor2.jpg'
      }
    ]
  },
  {
    id: 2,
    name: '消化内科',
    icon: '/static/department/gastro.png',
    status: 'busy',
    statusText: '较忙',
    description: '诊治胃肠道、肝胆等消化系统疾病',
    fee: 60,
    category: 'internal',
    doctors: [
      {
        name: '王医生',
        title: '主任医师',
        avatar: '/static/doctor/doctor3.jpg'
      },
      {
        name: '赵医生',
        title: '副主任医师',
        avatar: '/static/doctor/doctor4.jpg'
      }
    ]
  },
  {
    id: 3,
    name: '普通外科',
    icon: '/static/department/surgery.png',
    status: 'available',
    statusText: '可预约',
    description: '开展各类手术治疗，包括微创手术等',
    fee: 80,
    category: 'surgery',
    doctors: [
      {
        name: '陈医生',
        title: '主任医师',
        avatar: '/static/doctor/doctor5.jpg'
      }
    ]
  },
  {
    id: 4,
    name: '骨科',
    icon: '/static/department/orthopedics.png',
    status: 'available',
    statusText: '可预约',
    description: '专注骨关节、脊柱等疾病的诊治',
    fee: 80,
    category: 'surgery',
    doctors: [
      {
        name: '林医生',
        title: '主任医师',
        avatar: '/static/doctor/doctor6.jpg'
      },
      {
        name: '黄医生',
        title: '副主任医师',
        avatar: '/static/doctor/doctor7.jpg'
      }
    ]
  },
  {
    id: 5,
    name: '儿科门诊',
    icon: '/static/department/pediatrics.png',
    status: 'busy',
    statusText: '较忙',
    description: '为儿童提供全面的医疗保健服务',
    fee: 50,
    category: 'pediatrics',
    doctors: [
      {
        name: '刘医生',
        title: '主任医师',
        avatar: '/static/doctor/doctor8.jpg'
      }
    ]
  },
  {
    id: 6,
    name: '儿童保健科',
    icon: '/static/department/child-care.png',
    status: 'available',
    statusText: '可预约',
    description: '提供儿童生长发育监测、疫苗接种等服务',
    fee: 40,
    category: 'pediatrics',
    doctors: [
      {
        name: '周医生',
        title: '主任医师',
        avatar: '/static/doctor/doctor9.jpg'
      },
      {
        name: '吴医生',
        title: '副主任医师',
        avatar: '/static/doctor/doctor10.jpg'
      }
    ]
  }
])

// 根据分类筛选科室
const filteredDepartments = computed(() => {
  if (currentCategory.value === 'all') {
    return departments.value
  }
  return departments.value.filter(dept => dept.category === currentCategory.value)
})

// 选择分类
const selectCategory = (category) => {
  currentCategory.value = category
}

// 选择科室
const selectDepartment = (dept) => {
  uni.navigateTo({
    url: `/pages/appointment/doctor?departmentId=${dept.id}`
  })
}
</script>

<style lang="scss">
.department-container {
  min-height: 100vh;
  background: $bg-color;
  
  .category-list {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #fff;
    padding: 20rpx 0;
    margin-bottom: 20rpx;
    box-shadow: $shadow-sm;
    
    .scroll-view {
      white-space: nowrap;
      padding: 0 20rpx;
      
      &::-webkit-scrollbar {
        display: none;
      }
    }
    
    .category-item {
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      padding: 20rpx 30rpx;
      margin-right: 20rpx;
      position: relative;
      transition: all 0.3s;
      
      &.active {
        .category-icon {
          transform: scale(1.1);
        }
        
        text {
          color: $primary-color;
          font-weight: bold;
        }
        
        &::after {
          content: '';
          position: absolute;
          left: 50%;
          bottom: 0;
          transform: translateX(-50%);
          width: 40rpx;
          height: 4rpx;
          background: $primary-color;
          border-radius: 2rpx;
        }
      }
      
      .category-icon {
        width: 60rpx;
        height: 60rpx;
        margin-bottom: 10rpx;
        transition: all 0.3s;
      }
      
      text {
        font-size: 26rpx;
        color: $text-regular;
        transition: all 0.3s;
      }
    }
  }
  
  .department-list {
    padding: 20rpx;
    
    .department-item {
      margin-bottom: 20rpx;
      transition: all 0.3s;
      
      &:active {
        transform: scale(0.98);
      }
      
      .header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16rpx;
        
        .title-wrap {
          display: flex;
          align-items: center;
          
          .icon {
            width: 48rpx;
            height: 48rpx;
            margin-right: 16rpx;
          }
          
          .title {
            font-size: 32rpx;
            color: $text-primary;
            font-weight: bold;
          }
        }
        
        .status {
          font-size: 22rpx;
          padding: 4rpx 12rpx;
          border-radius: $radius-sm;
          
          &.available {
            color: $success;
            background: rgba($success, 0.1);
          }
          
          &.busy {
            color: $warning;
            background: rgba($warning, 0.1);
          }
          
          &.full {
            color: $danger;
            background: rgba($danger, 0.1);
          }
        }
      }
      
      .desc {
        font-size: 26rpx;
        color: $text-regular;
        margin-bottom: 20rpx;
        display: block;
        line-height: 1.6;
      }
      
      .doctors {
        display: flex;
        margin-bottom: 20rpx;
        overflow-x: auto;
        
        &::-webkit-scrollbar {
          display: none;
        }
        
        .doctor {
          display: flex;
          align-items: center;
          margin-right: 30rpx;
          flex-shrink: 0;
          
          &:last-child {
            margin-right: 0;
          }
          
          image {
            width: 80rpx;
            height: 80rpx;
            border-radius: 40rpx;
            margin-right: 12rpx;
            border: 2rpx solid rgba($primary-color, 0.1);
          }
          
          .info {
            .name {
              font-size: 26rpx;
              color: $text-primary;
              font-weight: bold;
              margin-bottom: 4rpx;
              display: block;
            }
            
            .title {
              font-size: 22rpx;
              color: $text-secondary;
              display: block;
            }
          }
        }
      }
      
      .footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 20rpx;
        border-top: 1rpx solid #eee;
        
        .price-info {
          .label {
            font-size: 26rpx;
            color: $text-regular;
            margin-right: 8rpx;
          }
          
          .price {
            font-size: 32rpx;
            color: $danger;
            font-weight: bold;
          }
        }
        
        .book-btn {
          width: 160rpx;
          height: 60rpx;
          line-height: 60rpx;
          font-size: 26rpx;
          
          &:active {
            transform: scale(0.95);
          }
        }
      }
    }
  }
}
</style> 